<template>
  <div>
    <div class="recommend-title">热销推荐</div>

    <ul>
      <router-link 
        class="item border-bottom" 
        v-for="i in recommendList" 
        :key="i.id"
        tag="li"
        :to="{name:'Detail', params:{id: i.id}}"
      >
        <!-- :to="`/detail/${i.id}`" -->
        <div class="item-img-wrapper">
          <img class="item-img" :src="i.imgUrl" alt="">
        </div>
        
        <div class="item-info">
          <p class="item-title">{{i.title}}</p>
          <p class="item-desc">{{i.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>

  </div>
</template>

<script>
export default {
  name: "recommend",
  props: ["recommendLists"],

  data() {
    return {
      recommendList: [
        {
          _id: "01", 
          imgUrl: "https://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg",
          title: "白石山世界地质公园",
          desc: "体验悬空玻璃栈道",
        },
        {
          _id: "02", 
          imgUrl: "https://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg",
          title: "白石山世界地质公园",
          desc: "体验悬空玻璃栈道",
        },
        {
          _id: "03", 
          imgUrl: "https://img1.qunarzz.com/sight/p0/1805/78/789e31213399290fa3.water.jpg_256x160_c7b5500c.jpg",
          title: "白石山世界地质公园",
          desc: "体验悬空玻璃栈道",
        },
      ],
      recommendList: this.recommendLists,
    }
  },
}
</script>

<style scoped>
  .recommend-title {
    line-height: 40px;
    background-color: #eee;
    text-indent: 10px;
    
    margin-top: 10px;
  }

  .item {
    display: flex;

    height: 95px;
    /* background-color: floralwhite; */

  }
  .item .item-img {
    width: 85px;
    height: 85px;
    padding: 5px;
  }

  .item .item-info {
    flex: 1;
    padding: 5px;

    min-width: 0;
    /* width: 200px; */
  }
  .item .item-info .item-title {
    line-height: 27px;
    font-size: 16px;

    /* 文字溢出 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item .item-info .item-desc {
    line-height: 20px;
    color: #ccc;    
  }
  .item .item-info .item-button {
    background-color: #ff9300;
    padding: 0 5px;
    margin-top: 8px;
    border-radius: 3px;
    color: #fff;
    line-height: 22px;
  }
</style>